<template>
  <a-layout id="components-layout-demo-top" class="layout" style="height:100%">
    <div id="header">
      <div class="logo">知&nbsp;否</div>

      <div id="title">
        <router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="home" />&nbsp;首页
        </router-link>
      </div>

      <div id="title1">
        <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="user" />&nbsp;个人中心
        </router-link>
      </div>



      <a-input-search placeholder="请输入要搜索的问题" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/>
      <button type="button" id="search"  style="
    height: 15px;
    width: 120px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: white;
    border-color: skyblue;
    /*transform: translateY(4px);*/
">
        <router-link :to="{name:'addQuestion',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          提问题
        </router-link>

      </button>
      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">


        <div id="right" style="padding: 15px 5px 20px 20px;">
          <a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px">
            <a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/>
          </a-badge>
<!--          <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}">
            <a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/>
          </router-link>-->
        </div>

        <template>
          <a-dropdown>
            <a style="color:white;font-size: 20px;" >
              {{ u_name }} <a-icon type="down" style="color:white;font-size:25px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
              </a-menu-item>
              <a-menu-item key="2" @click="logout">
                <a-icon type="logout" />
                退出
              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </template>

      </div>
    </div>




    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 20px 0">
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px',height:'95%', }">
        <a-page-header
            style=""
            sub-title="返回"
            @back="exit"
        />
        <div id="publishQuestions_box">
            <div id="question_title">
              <input placeholder="请输入标题" allow-clear  v-model="title"
                     style="height: 45px;
    min-height: 44px;
    display: block;
    width: 100%;
    font-size: 32px;
    line-height: 1.4;
    font-weight: 400;"/>
            </div>

            <a-textarea v-model="content" placeholder="请输入正文" allow-clear :rows="11" />
          <br/>
          <br/>
          <a-button type="primary"  @click="submitForm('form')" style="float: right;width:90px;padding: 0 10px;">提交问题</a-button>&nbsp;
        </div>



<!--        <a-form-model :model="form" form="form">
          <a-textarea v-model="title" placeholder="请写下你的问题" :rows="2" />

          <a-textarea v-model="content" placeholder="请写下问题的内容（即对问题的说明）" :rows="9" />
          <br/><br/>


        </a-form-model>-->
      </div>
    </a-layout-content>

  </a-layout>
</template>

<script>
export default {
  name: "addAnswer",
  data(){
    return{
      content:'',
      searchItem:'',
      title:'',
      id:this.$route.params.id,//从登陆界面进行传值
      img:this.$route.params.img,
      token:this.$route.params.token,
      count:'',
      u_name:this.$route.params.u_name,
      /*ifToken: localStorage.getItem('access_token'),*/
    }
  },
  mounted() {
    var _this = this;
    _this.$axios.post('/api/user/selectByUserId',
        _this.$qs.stringify({
          uId:_this.id,
        }),
        {headers:{access_token:_this.token}}
    ).then(function (response) {
      console.log("主页获取登录用户信息：");
      console.log(response.data);
      console.log(response.data.data.u_img);
      console.log(response.data.data.u_name);
      _this.img = response.data.data.u_img;
      _this.u_name=response.data.data.u_name;
    }).catch(function (error) {
      console.log(error);
      //_this.$message.error('请求失败');
    })
    _this.$axios.post('/api/msg/showMsgNum',
        _this.$qs.stringify({
          userId: _this.$route.params.id,//router传值！！！
        }),{headers:{access_token:_this.token}}
    ).then(function (response) {
      console.log(response.data.data);
      _this.count = response.data.data;
      //_this.list = response.data.data;
    }).catch(function (error) {
      console.log(error);
      _this.$message.error('获取消息失败');
    })
  },
  methods:{
    logout(){
      var _this = this;
      _this.$axios.post('/api/user/leave',
          _this.$qs.stringify({
            uId: this.id,
          }),{headers: {access_token:_this.token}}
      ).then(function (response) {
        console.log(response.data);
        localStorage.removeItem('access_token');
        localStorage.clear();
        _this.$router.push({
          path:'/login',
          name:'login',
        })
      }).catch(function (error) {
        console.log(error);
        _this.$message.error('请求失败');
      })
    },//end exit函数/*
    exit(){
      var _this = this;
      _this.$router.push({
        path:'/mainPage',
        name:'mainPage',
        params:{
          id:_this.id,
          img:_this.img,
          token:_this.token,
          /*question_id:_this.question_id,
          question_state:0,
          question_title:_this.question_title,
          question_content:_this.question_content,*/
        }
      })
    },
    onClick ({ key }) {
      console.log(`Click on item ${key}`)
    },
    mainPage(){
      this.$router.push({name:"mainPage"})
    },
    submitForm(formName){
      var _this = this;
      _this.$axios.post('/api/quest/addQuest',
          _this.$qs.stringify({
            userId:_this.id,
            questionContent: _this.content,
            questionTitle: _this.title,
          }),{headers:{access_token:_this.token}}
      ).then(function (response) {
        // console.log("请求成功");
        console.log(response.data);
        if(response.data.code === -1)
          _this.$message.info('该问题已经有用户提出！');
        else if(response.data.code === 90000)
          _this.$message.error('请先登录再提问');
        else
        {
          _this.$message.success('提问成功！请耐心等待回复');
          _this.$router.push({
            path:'/mainPage',
            name:'mainPage',//路由命名
            params:{
              id:_this.id,
              img:_this.img,
              token:_this.token,
            }
          });
        }
      }).catch(function (error){
        console.log(error);
        console.log(formName.text);
        _this.$message.error('提交失败，请尝试重新提交');
      })
    },//end submitForm，提交所写的回答

    onSearch(){
      var _this = this;
      _this.$axios.post('/api/quest/selectByTitle',
          _this.$qs.stringify({
            questionTitle:_this.searchItem,
          }),{ headers: { access_token: _this.token } }
      ).then(function (response) {
        console.log(response.data.data);
        _this.$router.push({
          path:'/searchPage',
          name:'searchPage',//路由命名
          params:{
            list:response.data.data,
            id:_this.id,
            img:_this.img,
            token:_this.token
          },
        });//end 页面跳转
      }).catch(function (error) {
        console.log(error);
        _this.$message.error('请求失败');
      })
    },//end onSearch函数，进行查找问题

    getMessage(){
      var _this = this;
      _this.$router.push({
        path:'/messagePage',
        name:'messagePage',
        params:{
          id:_this.id,
          img:_this.img,
          token:_this.token,
        }
      })
    },//end getMessage函数，获取消息
  }//end methods
}
</script>

<style scoped>
#publishQuestions_box{
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
  color: #121212;
  -webkit-tap-highlight-color: rgba(18,18,18,0);
  margin: 0px auto 0;
  width: 760px;
}

#question_title{
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
  color: #121212;
  -webkit-tap-highlight-color: rgba(18,18,18,0);
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 14px;
  background: #fff;
  border-radius: 3px;
  box-sizing: border-box;
  transition: background .2s,border .2s;
  margin: 16px 0;
  border: 0;
  padding: 0;
  width: 100%;
  position: relative;
  height: inherit;
}

</style>
